<template>
  <div id="Form" ref="form">
    <img class="banner" src="./images/banner.jpg" alt="" />

    <div class="form_list">
      <div class="list_item">
        <p class="title">Q1: What’s your overall score for today’s class?</p>
        <van-rate v-model="userForm.value_class" />
      </div>

      <div class="list_item">
        <p class="title">Q2: Today’s class is applicable to your daily work?</p>
        <van-rate v-model="userForm.value_work" />
      </div>

      <div class="list_item">
        <p class="title">Q3：Did you learn something new today?</p>
        <van-radio-group v-model="userForm.radio_today" direction="horizontal">
          <van-radio name="1">YES</van-radio>
          <van-radio name="2">NO</van-radio>
        </van-radio-group>
      </div>

      <div class="list_item">
        <p class="title">Q4: Any suggestion for the course design and topic?</p>
        <van-field v-model="userForm.opinion" type="textarea" />
      </div>

      <van-button :loading="btnLoading" type="info" @click="onSubmit">
        SEND
      </van-button>
    </div>
  </div>
</template>

<script>
import { onSubmitForm } from '@/api/index'
import { toDates } from '@/utils/changeTime'
import qs from 'qs'
import { mapState } from 'vuex'
export default {
  name: 'Form',
  components: {},
  props: {},
  data () {
    return {
      btnLoading: false, // 提交按钮禁用状态
      userForm: {
        SOEID: '', // SOEID
        value_class: 0, // 评分1
        value_work: 0, // 评分2
        radio_today: '', // 单选
        opinion: '', // 意见
        release_time: '' // 当前时间
      }
    }
  },
  computed: {
    ...mapState(['SOEID'])
  },
  watch: {
    // 监视如果 SOEID 不存在则跳转首页
    SOEID: {
      handler: function () {
        if (!this.SOEID) {
          this.$router.push('/')
          this.$toast({ message: '请输入 SOEID', position: 'top', duration: 900 })
        }
      },
      // 在初始化的时候先调用一下
      immediate: true
    }
  },
  created () {
    this.userForm.SOEID = this.SOEID
  },
  mounted () { },
  methods: {
    // 点击提交按钮
    async onSubmit () {
      if (this.userForm.SOEID === '' ||
        this.userForm.value_class === '' ||
        this.userForm.value_work === '' ||
        this.userForm.radio_today === '') {
        this.$toast({ message: '信息不完善', position: 'top', duration: 900 })
        return
      }
      this.btnLoading = true
      this.userForm.release_time = toDates(Date.parse(new Date()))
      const { data } = await onSubmitForm(qs.stringify(this.userForm))
      if (data.code !== 201) {
        this.btnLoading = false
        this.$toast({ message: data.msg, position: 'top', duration: 900 })
        return
      }
      this.$router.push('/thank')
      this.$toast({ message: '提交成功！', position: 'top', duration: 900 })
    }
  }
}
</script>

<style lang='less' scoped>
#Form {
  overflow-x: hidden;
  background: #fff;
  .banner {
    width: 100vw;
    overflow-x: hidden;
  }
  .form_list {
    width: 100vw;
    overflow-x: hidden;
    padding: 20px 20px 40px 20px;
    box-sizing: border-box;
    .list_item {
      margin-top: 20px;
      .title {
        font-size: 14px;
      }
      .van-radio {
        font-size: 14px;
      }
      .van-radio-group {
        margin-top: 12px;
      }
      .van-field {
        margin-top: 12px;
        border: 1px solid rgb(49, 49, 49);
        border-radius: 4px;
      }
      /deep/ .van-rate__icon--full {
        color: #056dae !important;
      }
      /deep/ .van-radio__icon--checked .van-icon {
        color: #fff;
        background-color: #056dae;
        border-color: #056dae;
      }
      /deep/ .van-icon-success:before {
        content: "";
      }
    }
    .van-button {
      background: #056dae;
      width: 150px;
      border-radius: 5px;
      position: relative;
      top: 25px;
      border: none;
      .van-button__text {
        font-size: 18px;
      }
    }
  }
}
</style>
